<div style="padding:24px;">
  <p  class="page-title" routerLink="../../list">
    <i class="anticon anticon-left-circle-o"></i> <span>卡券列表</span>
  </p>

  <form nz-form [formGroup]="validateForm">
    <div class="content bg-white">
      <div class="bx-form">
        <p class="bx-form_title">基本信息</p>
        <div nz-form-item nz-row>
          <div nz-form-label class="bx-form-item_label">
            <label>卡券名称</label>
          </div>
          <div class="bx-form-item_content">
            <nz-input
              [nzType]="'text'"
              [ngModelOptions]="{standalone: true}"
              [nzReadonly]=true
              [nzDisabled]=true
              [nzSize]="'large'"
              [ngModel]="cardInfo?.card_coupons_name"></nz-input>
          </div>
        </div>
        <div nz-form-item nz-row>
          <div nz-form-label class="bx-form-item_label">
            <label>减免金额</label>
          </div>
          <div nz-form-control class="bx-form-item_content">
            <nz-input
              [ngModelOptions]="{standalone: true}"
              [nzReadonly]=true
              [nzDisabled]=true
              [ngModel]="cardInfo?.face_value/1000"
              style="width: 100%;"></nz-input>
          </div>
        </div>
       <div nz-form-item nz-row>
          <div nz-form-label class="bx-form-item_label">
            <label>有效期</label>
          </div>
          <div nz-form-control class="bx-form-item_content">
            <nz-radio-group [ngModelOptions]="{standalone: true}"
                            [ngModel]="cardInfo?.term_of_validity_type">
              <label nz-radio [nzValue]="1" [nzDisabled]=true>
                <span>
                  <span class="radio-text">固定时间段</span>
                  <span *ngIf="cardInfo?.term_of_validity_type === 1">
                   <nz-input
                     style="width: 40%;"
                     [nzType]="'text'"
                     [ngModelOptions]="{standalone: true}"
                     [nzReadonly]=true
                     [nzDisabled]=true
                     [nzSize]="'large'"
                     [ngModel]="cardInfo?.term_of_validity_time_start"></nz-input>
                   <nz-input
                     style="width: 40%;"
                     [nzType]="'text'"
                     [ngModelOptions]="{standalone: true}"
                     [nzReadonly]=true
                     [nzDisabled]=true
                     [nzSize]="'large'"
                     [ngModel]="cardInfo?.term_of_validity_time_end"></nz-input>
                  </span>
                </span>
              </label>
              <label nz-radio [nzValue]="2" [nzDisabled]=true>
                <span class="radio-text">领取后</span>
                <span *ngIf="cardInfo?.term_of_validity_type === 2">
                  <nz-select
                    style="width: 120px;"
                    [nzDisabled]="true"
                    [nzPlaceHolder]="'请选择天数'"
                    [ngModelOptions]="{standalone: true}"
                    [ngModel]="cardInfo.term_of_validity_start">
                    <nz-option
                      *ngFor="let option of options"
                      [nzLabel]="option"
                      [nzValue]="option"></nz-option>
                  </nz-select>
                   天生效，有效天数
                  <nz-input
                    style="width: 100px;"
                    [ngModelOptions]="{standalone: true}"
                    [nzReadonly]="true"
                    [nzDisabled]="true"
                    [ngModel]="cardInfo?.term_of_validity"></nz-input> 天
                </span>
              </label>
            </nz-radio-group>
          </div>
        </div>
        <div nz-form-item nz-row>
          <div nz-form-label class="bx-form-item_label">
            <label>卡券库存</label>
          </div>
          <div nz-form-control [nzValidateStatus]="getFormControl('in_stock')" class="bx-form-item_content">
            <nz-radio-group [ngModelOptions]="{standalone: true}" [ngModel]="cardInfo?.in_stock_type">
              <label nz-radio [nzValue]="0" [nzDisabled]=true>
                <span>
                  <span class="radio-text">无限制</span>
                </span>
              </label><br>
              <label nz-radio [nzValue]="1" [nzDisabled]=true>
                <span>
                  <span class="radio-text">限制</span>
                  <nz-input
                    style="width: 100px;"
                    [ngModelOptions]="{standalone: true}"
                    [nzReadonly]="true"
                    [nzDisabled]="true"
                    [ngModel]="cardInfo?.in_stock"
                    [nzSize]="'large'"></nz-input> 张
                </span>
              </label>
            </nz-radio-group>
          </div>
        </div>
        <div nz-form-item nz-row>
          <div nz-form-label class="bx-form-item_label">
            <label>每人可领取数量</label>
          </div>
          <div nz-form-control class="bx-form-item_content">
            <nz-input
              style="width: 155px;"
              [ngModelOptions]="{standalone: true}"
              [nzReadonly]="true"
              [nzDisabled]="true"
              [ngModel]="cardInfo?.condition_receive_quantity"
              [nzSize]="'large'"></nz-input> 张
          </div>
        </div>
      </div>
    </div>
    <div class="content bg-gray">
      <p class="bx-form_title">使用条件</p>
      <div nz-form-item nz-row>
        <div nz-form-label class="bx-form-item_label">
          <label>最低消费</label>
        </div>
        <div nz-form-control class="bx-form-item_content">
          满 <nz-input
          style="width: 155px;"
          [ngModelOptions]="{standalone: true}"
          [nzReadonly]="true"
          [nzDisabled]="true"
          [ngModel]="cardInfo?.condition_lower_limit/1000"
          [nzSize]="'large'"></nz-input> 元可用
        </div>
      </div>
      <div nz-form-item nz-row>
        <div nz-form-label class="bx-form-item_label">
          <label>适用商品</label>
        </div>
        <div nz-form-control class="bx-form-item_content">
          <nz-radio-group [ngModelOptions]="{standalone: true}" [ngModel]="cardInfo?.condition_use_in">
            <label nz-radio-button [nzValue]="1" [nzDisabled]=true>
              <span>全场商品</span>
            </label><label nz-radio-button [nzValue]="2" [nzDisabled]=true>
              <span>部分商品</span>
            </label><label nz-radio-button [nzValue]="3" [nzDisabled]=true>
              <span>分类商品</span>
            </label>
          </nz-radio-group>
         <!-- 部分商品 -->
          <div *ngIf="cardInfo?.condition_use_in === 2" class="goods-content">
            <div class="bg-white">
              <nz-table #nzTable
                        [nzDataSource]="checkedGoodsTable"
                        [nzPageSize]="99"
                        [nzIsPagination] = false
                        [nzScroll]="{ y: 300 }">
                <ng-template #nzFixedHeader>
                  <thead nz-thead>
                    <tr>
                      <th nz-th [nzWidth]="'110px'"><span>商品ID</span></th>
                      <th nz-th [nzWidth]="'120px'"><span>商品图片</span></th>
                      <th nz-th [nzWidth]="'220px'"><span>商品名称</span></th>
                      <th nz-th [nzWidth]="'150px'"><span>商品价格</span></th>
                      <th nz-th [nzWidth]="'150px'"><span>商品库存</span></th>
                    </tr>
                  </thead>
                </ng-template>
                <tbody nz-tbody>
                <tr nz-tbody-tr *ngFor="let data of checkedGoodsTable;let i = index;">
                  <td nz-td>{{data.id}}</td>
                  <td nz-td><img src="{{aliyunOssOutputUrl+'/'+data.first_picture}}" alt=""></td>
                  <td nz-td style="width: 200px">{{data.name}}</td>
                  <td nz-td>{{data.price}}</td>
                  <td nz-td>{{data.in_stock}}</td>
                </tr>
                </tbody>
              </nz-table>
            </div>
          </div>
          <!-- 分类商品 -->
          <div *ngIf="cardInfo?.condition_use_in === 3" class="goods-content type-content">
            <label nz-checkbox class="type-checkbox"
                   [ngModelOptions]="{standalone: true}"
                   [nzDisabled]=true
                   *ngFor="let data of groupList"
                   [ngModel]="data.checked">
              <span>{{data.name}}</span>
            </label>
          </div>
          <div>
            <label nz-checkbox
                   [nzDisabled]="true"
                   [ngModelOptions]="{standalone: true}"
                   [ngModel]="!!cardInfo?.condition_can_use_in_pt">
              <span>拼团商品可用</span>
            </label>
          </div>
        </div>
      </div>
    </div>
    <div class="content bg-white">
      <div class="bx-form">
        <div nz-form-item nz-row>
          <div nz-form-label class="bx-form-item_label">
            <label>备注</label>
          </div>
          <div class="bx-form-item_content">
            <nz-input
              [ngModelOptions]="{standalone: true}"
              [nzReadonly]="true"
              [nzDisabled]="true"
              [ngModel]="cardInfo?.remark"
              [nzType]="'text'"
              [nzSize]="'large'"></nz-input>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>




